package com.csw.compose.ui.module.component.advanced

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.pulltorefresh.PullToRefreshBox
import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.onPlaced
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.NormalSpacer
import com.csw.compose.ui.components.OlItem
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch


@Preview
@Composable
fun PullToRefreshPagePreview() {
    BasePage({}, "下拉刷新") {
        PullToRefreshPage()
    }
}

class PullToRefreshPageData {
    companion object : Destination("PullToRefreshPage")
}

/**
 *[参考](https://developer.android.google.cn/develop/ui/compose/components/pull-to-refresh?hl=zh-cn)
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PullToRefreshPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("PullToRefreshBox 用于在Compose中实现下拉刷新功能，这里也简单举例上拉加载的实现")

        NormalSpacer()
        val isRefreshing = remember { mutableStateOf(false) }
        val state = rememberPullToRefreshState()
        val scope = rememberCoroutineScope()
        val listSize = remember { mutableIntStateOf(0) }
        val loadMore = remember { mutableIntStateOf(0) }//加载更多状态，0加载中，1加载完成，2没有更多数据
        val onRefresh: () -> Unit = {
            scope.launch {
                loadMore.intValue = 0
                isRefreshing.value = true
                delay(2 * 1000)
                listSize.intValue = 30
            }.invokeOnCompletion {
                isRefreshing.value = false
            }
        }
        PullToRefreshBox(
            isRefreshing = isRefreshing.value,
            onRefresh = onRefresh,
            state = state,
            modifier = Modifier
                .fillMaxWidth()
                .height(500.dp)
                .background(Color(255, 0, 0, 128))
        ) {
            LazyColumn(
                Modifier.onPlaced {
                    if (listSize.intValue <= 0) {
                        onRefresh()
                    }
                }
            ) {
                items(listSize.intValue) {
                    Text(
                        "item${it}", color = Color.White, modifier = Modifier
                            .fillMaxWidth()
                            .padding(10.dp)
                    )
                }
                if (listSize.intValue > 0) {
                    item {
                        when (loadMore.intValue) {
                            1 -> {
                                Text("加载完成", color = Color.White, modifier = Modifier
                                    .fillMaxWidth()
                                    .padding(10.dp)
                                    .onPlaced {
                                        scope.launch {
                                            delay(500)
                                            listSize.intValue += 30
                                            loadMore.intValue = 0
                                        }
                                    }
                                )
                            }

                            2 -> {
                                Text(
                                    "没有更多数据了", color = Color.White, modifier = Modifier
                                        .fillMaxWidth()
                                        .padding(10.dp)
                                )
                            }

                            else -> {
                                Text("加载中", color = Color.White, modifier = Modifier
                                    .fillMaxWidth()
                                    .padding(10.dp)
                                    .onPlaced {
                                        scope.launch {
                                            delay(2 * 1000)
                                            if (listSize.intValue >= 90) {
                                                loadMore.intValue = 2
                                            } else {
                                                loadMore.intValue = 1
                                            }
                                        }
                                    })
                            }
                        }
                    }
                }
            }
        }
        UlItem("PullToRefreshBox")
        LabelText("横向分隔线")
        OlItem(1, "isRefreshing")
        LabelText("通过该变量控制刷新状态")
        OlItem(2, "onRefresh")
        LabelText("触发下拉刷新的回调，应该在此执行任务刷新数据")
        OlItem(3, "state")
        LabelText("下拉刷新组件状态，提供了方法显示与隐藏下拉刷新提示")
    }
}